<template>
  <div class="userList-nav">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="table-nav">
      <div class="search-nav">
        <el-input
          v-model="SearchInput"
          style="width: 20%; min-width: 100px"
          placeholder="Please Input"
          size="large"
          clearable
          @clear="getList()"
        >
          <template #append>
            <el-button icon="Search" @click="searchUser()" />
          </template> </el-input
        >&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button type="primary" size="large" @click="toAddPage(1)"
          >添加商品</el-button
        >
      </div>
      <el-table
        :data="userList.goods"
        border
        stripe
        style="width: 100%"
        :max-height="500"
      >
        <el-table-column type="index" width="50" />
        <el-table-column prop="goods_name" label="商品名称" />
        <el-table-column prop="goods_price" label="商品价格(元)" width="100" />
        <el-table-column prop="goods_weight" label="商品重量" width="100" />
        <el-table-column prop="add_time" label="创建时间" width="100">
          <template #default="scope">
            <div>
              <span>{{
                new Date(scope.row.add_time * 1000).toLocaleString()
              }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <div>
              <!-- 修改按钮 -->
              <el-button
                type="success"
                icon="Edit"
                @click="toAddPage(2, scope.row.goods_id)"
              />
              <!-- 删除按钮 -->
              <el-button
                type="danger"
                icon="Delete"
                @click="deleteUser(scope)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-nav">
        <el-pagination
          v-model:currentPage="pagenum"
          v-model:page-size="pagesize"
          :page-sizes="[10, 15, 30, 50]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="changePage"
          @current-change="changePage"
        />
      </div>
    </div>
    <div></div>
  </div>
</template>
  
  <script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { getGoodsList, deletetGoods } from "@/api/goods";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let pagenum = ref(1);
let pagesize = ref(15);
let userList = reactive({});
let SearchInput = ref("");
let router = useRouter();
let total = ref(0);
let store = useStore();
let getList = async (query = "") => {
  let res = await getGoodsList({
    query,
    pagenum: pagenum.value,
    pagesize: pagesize.value,
  });
  Object.assign(userList, res.data);
  total.value = userList.total;
};
const searchUser = () => {
  getList(SearchInput.value);
};
const changePage = () => {
  getList();
};
getList();
const deleteUser = (scope1) => {
  ElMessageBox.confirm(
    `确定要删除商品(${scope1.row.goods_name})吗？`,
    "Warning",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(async () => {
      let res = await deletetGoods(scope1.row.goods_id);
      let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
      ElMessage({
        type: ls ? "success" : "error",
        message: ls ? "删除成功" : res.meta.msg,
      });
      getList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
const toAddPage = (type, id = 0) => {
  Object.assign(store.state.goodsFormType, { type, id });
  router.push({
    name: "addGoods",
  });
};
</script>
  
  <style lang="scss" scoped>
.userList-nav {
  position: relative;
  width: 100%;
  // height: 100%;
  overflow: auto;
  .table-nav {
    position: absolute;
    width: 100%;
    // max-height: 100%;
    padding: 20px;
    box-sizing: border-box;
    margin-top: 10px;
    background-color: white;
    overflow: hidden;
    .el-table {
      margin: 20px 0;
    }
    .pagination-nav {
    }
  }
}
</style>